﻿body{ margin: 0;padding: 0;background: url(../img/stripe.png) repeat; }

h1, h2{ border-bottom: solid 1px #ddd;}
h1, h2, h3{ color: #4c4c4c; margin: 0 10px 10px 10px;}

/*header*/
.header{ height: 55px;width: 100%;background-color: #3d3d3d;border-bottom: solid 1px #4ba9d5; background: url(../img/stripe_header.png) repeat;}
.header img{ border: none;margin: 10px;height: 35px;float: none;}
.header .btn-group{ margin: 0 auto;text-align: center;float: none;width: 900px;position: absolute;left: 50%;margin-left: -450px;margin-top: 13px;}
.header .title {color:white; padding-left:10px; margin-top: 20px; float: left; font-size: 12px; font-weight: bold;}

/* navigation */
.navigation {
    background-color: #4ba9d5;
    border-top: solid 1px #3d3d3d;
    width: 100%;
    /*box-shadow: 0 3px 5px -2px #b8b8b8;*/
    padding: 3px 0px 3px 0px;
    font-size: small;
    height:35px;
    display:inline-block;
}
    .navigation .display {
    width:1000px;
    margin-left:auto;
    margin-right:auto;
    padding-left:20px;
    padding-right:20px;
    color:#fff;
    height:35px;
    }
    .navigation #backbutton {
    line-height:20px;
    display:block;
    border-radius: 3px 0px 0px 0px;
    margin-top:12px;
    width:55px;
    padding-left:10px;
    }
    .navigation .breadcrumb { height:20px; border-radius: 10px 10px 0px 0px; }

#containerview {
width: 1000px;
margin-left: auto;
margin-right: auto;
overflow-x: hidden;
}
#mainview {
    width: 3000px;
}

.content {
    padding-top:10px;
    display:none;
    float:left;
    min-width:800px;
    width: 1000px;
    min-height: 400px;
    box-shadow: 0 10px 30px -2px #ddd;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    background-color: #fff;
}


/*sites view */
.sites #dashboardstatus { cursor: pointer; }
.sites .titlearea { padding-left:20px; margin-top:10px; float:left;}
.sites .buttonarea { vertical-align:bottom; float: right;margin-bottom: 5px;margin-right: 10px;}
.sites .tablecontainer { width:98%; margin-left: auto; margin-right:auto;}
.sites table{ width: 100%; }
.sites table th:first-child{ width: 10px;}
.sites table td{ font-size: 12px;}
.sites table tr td:nth-child(2) i{ margin-top: 0;padding-right: 3px;}
.sites table td:nth-child(2){ font-weight: bold;}
.sites table th:first-child:hover, table.sites th:nth-child(2):hover{background-color: #fff;cursor: default;}
.sites th a.disabled{ border: none;cursor: pointer !important;}
.sites th:nth-child(n+3), .sites td:nth-child(n+3){ width: 25px;text-align: center;}
.sites th:nth-child(n+3):hover, .sites tr td:nth-child(n+2):hover{ background-color: #c3e8ff; cursor: pointer;box-shadow: inset 0 0 8px 0 #97cef1;}
.sites th.instance.instancehover { padding-right:7px; border-top: 1px solid black; border-left: 1px solid black; border-right: 1px solid black; }
.sites td.instancehover { padding-right:7px; border-left: 1px solid black; border-right: 1px solid black; }
.sites .busyinstance { background-color: #000000 !important; opacity:0.5 }
.sites tr:last-child td.instancehover { border-bottom: 1px solid black; }

/* site details view */
.sitedetails .verttabspace {
    width: 20%;
    float: left;
}
.sitedetails .verttabspace i {
    float:right;
}
.sitedetails .verttabcontent {
    width: 75%;
    float: left;
    padding-left: 10px;
}
.sitedetails .verttabcontent .tab {
    display: none;
}
.sitedetails .sitethumbcontainer {
    width:300px;
    height:320px;
    border: solid 1px #9B9B9B;
    border-radius:5px;
    position:absolute;
    background-repeat:no-repeat;
    background-color:#D6D6D6;
}
.sitedetails .sitethumbcontainer img { border-radius:5px 5px 0px 0px; }

.sitedetails .sitethumbcontainer .thumbnourl {
display:none;
margin-left: -15%;
margin-top: -15%;
text-align:center;
position:absolute;
left:50%;
top:50%;
width:100px;
height:50px;
background-color: #D6D6D6;
opacity: .7;
border-radius: 5px;
}
.sitedetails .sitethumbcontainer .thumbloader{
display:none;
margin-left:-15%;
margin-top:-15%;
text-align:center;
position: absolute;
left:50%;
top:50%;
width:100px;
height:50px;
background-color: #D6D6D6;
opacity: .7;
border-radius: 5px;
}
.sitedetails .sitethumbcontainer .thumbloader span { opacity:1; }
.sitedetails .sitethumbcontainer .refreshme{
position:absolute;
bottom:0px;
right:0px;
width: 96%;
border-radius: 0px 0px 5px 5px;
}
.sitedetails .generaldetails {
margin-left:300px;
height:330px;
padding-left:5px;
padding-right: 5px;
}
.sitedetails .generaldetails .buttonarea { width:205px; margin-bottom:-21px}

.sitedetails .generaldetails table{
margin: 0px 0px 0px 20px;
width:100%;   
}
.sitedetails .generaldetails table td { padding:5px;}
.sitedetails .generaldetails table td:nth-child(1) {
text-align:right;
font-weight:bold;
}
.sitedetails .generaldetails table td:nth-child(2) {

}

.sitedetails .bindings .bindingstable {
    width:100%;
    margin-left:10px;
    margin-right:10px;
}
.sitedetails .bindings .bindingstable thead td{
    font-weight:bold;
    text-align:left;
}

.sitedetails .bindings .bindingstable thead td:nth-child(1){ width:40%; }
.sitedetails .bindings .bindingstable thead td:nth-child(2){ width:20%; }
.sitedetails .bindings .bindingstable thead td:nth-child(3){ width:40%; }
.sitedetails .bindings .bindingstable tbody tr { font-size:11px; cursor:pointer; }
.sitedetails .bindings .bindingstable tbody .hover td { background-color:#c3e8ff; }
.sitedetails .bindings .bindingstable tbody td:nth-child(3){ font-size:9px; }
.sitedetails .bindings .bindingstable tbody i { cursor:pointer; }
.sitedetails .bindings .buttonarea { float:right; margin-bottom:10px; margin-right:-10px; }
.sitedetails #bindingsLoader {
    display:none;
    width:790px;
    height:100%;
    opacity:.8;
    background-color: #97cef1;
    position:fixed;
    z-index:990;
    text-align:center;
    vertical-align:central;
}
.sitedetails #bindingsLoader div {
    left:50%;
    top:40%;
    position:absolute;
}



#dialogBackCover {
    width:100%;
    height:100%;
    opacity:.8;
    background-color: #97cef1;
    position:fixed;
    z-index:998;
}
#dialogSpace
{ 
    display:none;
    position:absolute;
    top:40%;
    left:50%;
    width:300px;
    height:150px;
    z-index:999;
}
#dialogSpace .dialog
{
    display:none;
    background-color: #F5F5F5;
    position:relative;
    left:-50%;
    top:-50%;
    border: 1px solid #ddd;
    border-radius: 5px 5px;
    overflow:hidden;
}
#dialogSpace .dialog .contentWrapper {
    padding: 10px;
}
#dialogSpace .dialog .msg
{
    position:relative;
}
#dialogSpace .dialog .title
{
    padding:5px;
    width:100%;
    height:20px;
    background-color: #97cef1;
    height: 13px;
    margin-top: -5px;
    font-size: 10px;
}
.dialog .error
{
    font-size:10px;
    display:none;
    color:red;
}
.dialog .loader {
display:none;
}
.dialog#loginDialog {
    height:150px;
}
.dialog#addSiteDialog {
    height:125px;
}
.dialog#siteBindingDialog {
    height:275px;
}
.dialog#disconnectedDialog {
    height:150px;
}
.dialog#editSiteDialog {
    height:275px;
}
.dialog .buttonBar {
    position: absolute;
    bottom: 10px;
    text-align: right;
    width: 90%;
}

@-ms-keyframes statespin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes statespin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes statespin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes statespin {
    from { transform:rotate(0deg); }
    to { transform:rotate(360deg); }
}

@-ms-keyframes statepulse {
    from { -ms-transform: scale(1); }
    50% { -ms-transform: scale(1.3); }
    to { -ms-transform: scale(1); }
}
@-moz-keyframes statepulse {
    from { -moz-transform: scale(1); }
    50% { -moz-transform: scale(1.3); }
    to { -moz-transform: scale(1); }
}
@-webkit-keyframes statepulse {
    from { -webkit-transform: scale(1); }
    50% { -webkit-transform: scale(1.3); }
    to { -webkit-transform: scale(1); }
}
@keyframes statepulse {
    from { transform: scale(1); }
    50% { transform: scale(1.3); }
    to { transform: scale(1); }
}

.animate-pulse {
    -webkit-animation-name: statepulse;
    -webkit-animation-duration: 1000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: statepulse;
    -moz-animation-duration: 1000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: statepulse;
    -ms-animation-duration: 1000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    
    animation-name: statepulse;
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.animate-rotate {
    -webkit-animation-name: statespin;
    -webkit-animation-duration: 1000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: statespin;
    -moz-animation-duration: 1000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: statespin;
    -ms-animation-duration: 1000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    
    animation-name: statespin;
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.deplColor1 {
    background-color: orange;
}
.deplColor2 {
    background-color: blue;
}
.deplColor3 {
    background-color: green;
}
.deplColor4 {
    background-color: red;
}

.radial_container { 
	position:absolute; 
	left:425px; 
	top: 75px; 
	width:100px; 
	height:100px; 
	text-align:center;
}
.radial_div_item {
	background-color:none;
	height:30px;
	padding:10px;
	color:#234;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	cursor:pointer;
}
.radial_div_item.active { 
	background-color:#511; color:white;
	padding: 10px; 
	-moz-border-radius:40px;
	z-index:100;
}
.my_class { 
	font-size:1.5em; 
	color:#abc;
	background-color:#def;
	-moz-border-radius:30px;
	width:30px;
	height:30px;
	-webkit-border-radius:30px;
}